
<template>
  <div class="MailList">
    <el-input v-model="searchMail" placeholder="请输入检索内容"></el-input>
    <el-table :data="allMailList" stripe style="width: 100%" @row-click="mailDetailClicked">
      <el-table-column
        prop="title"
        label="标题"
        align="left">
      </el-table-column>
      <el-table-column
        prop="fromUser"
        label="发件人"
        align="left">
      </el-table-column>
      <el-table-column
        prop="mailBox"
        label="收件箱"
        align="left">
      </el-table-column>
      <el-table-column
        prop="receiveTime"
        label="接收时间"
        align="left">
      </el-table-column>
    </el-table>
    <div id="page">
      <el-pagination
        @size-change="pageSizeChanged"
        @current-change="pageChange"
        :current-page="currentPageNum"
        :page-sizes="[10, 30, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totleMails">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  name: 'MailList',
  data() {
    return {
      allMailList: [],
      totleMails: 0,
      pageSize: 10,
      currentPageNum: 1,
      searchMail:''
    }
  },
  mounted: function () {
    this.getMails(0, this.pageSize);
  },
  methods: {
    //请求邮件接口，获取邮件
    getMails: function (currentPageNum, pageSize, order) {
      this.$http.get('mail/all', {
        params: {
          'current': currentPageNum,
          'pageSize':pageSize,
          'order': order
        }
      }).then(res => {
          this.allMailList = res.data.records;
          this.totleMails = res.data.total;
          //console.log(JSON.stringify(this.allMailList));
        });
    },
    //更新邮件列表
    updateMails: function (newPageNow, newPageSize) {
      this.getMails(newPageNow, newPageSize);
    },
    //当前页改变的回调
    pageChange: function (pageNow) {
      console.log('用户点击了第【' + pageNow + '】页');
      this.updateMails(pageNow, this.pageSize);
    },
    //页面大小改变的回调
    pageSizeChanged: function (pageSizeNow) {
      console.log('当前每页显示大小为:' + pageSizeNow);
      this.updateMails(1, pageSizeNow);
    },
    mailDetailClicked: function (row, event, column) {
      console.log("要查看的邮件id:" + row.id);
      this.$router.push("/mail/detail/" + row.id);
    },
    deleteMailBtnClicked: function (mailId) {
      console.log("要删除的邮件id:" + mailId);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>